<template>
  <div class="customer">
    <van-nav-bar
        title="丹能领料明细"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
<!--    <van-search-->
<!--        v-model="seorderfbillno"-->
<!--        shape="round"-->
<!--        show-action-->
<!--        background="#57a3f3"-->
<!--        placeholder="请输入销售订单号"-->
<!--    >-->
<!--      <template #action>-->
<!--        <van-button round  size="small" type="info" @click="onSearch(1)" style="width: 60px;">查询</van-button>-->
<!--      </template>-->
<!--    </van-search>-->
    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-list style="overflow: scroll">
        <div class="listColumn">
          <div>工单号</div>
          <div>产品代码</div>
          <div>产品名称</div>
          <div>规格型号</div>
          <div>工单数量</div>
          <div>入库数量</div>
          <div>手工结案数量</div>
          <div>领料状态</div>
        </div>
        <div class="listItem" v-for="(task, index) in taskList" :key="index">
          <div>{{ task.fbillno }}</div>
          <div>{{ task.fnumber }}</div>
          <div>{{ task.fname }}</div>
          <div>{{ task.fmodel }}</div>
          <div>{{ task.fqty }}</div>
          <div>{{ task.fstockqty }}</div>
          <div>{{ task.sgjafqt }}</div>
          <div>{{ task.lldate }}</div>
        </div>
      </van-list>
    </div>
<!--    <div>-->
<!--      <van-pagination v-model="pageNo" mode="simple" :total-items="total" :show-page-size="6" :items-per-page="pageSize" force-ellipses @change="changePg">-->
<!--        <template #prev-text>-->
<!--          <van-icon name="arrow-left" />-->
<!--        </template>-->
<!--        <template #next-text>-->
<!--          <van-icon name="arrow" />-->
<!--        </template>-->
<!--        <template #page="{ text }">{{ text }}</template>-->
<!--      </van-pagination>-->
<!--    </div>-->

  </div>
</template>

<script>
import { mapState } from 'vuex'
import { dailySeoutStockllDetail } from '@/api/api'
import { Notify } from 'vant'

export default {
  name: "ttPickDetail",
  data () {
    return {
      seorderfbillno: '',
      loading: false,
      pageNo:1,
      total: 0, // 总页数
      pageSize: 20, //每页显示条数
      taskList: []
    }
  },
  computed: {
    ...mapState({
      openId: state => state.user.openId
    })
  },
  mounted() {
  },
  created () {
    this.getList()
  },
  methods: {
    changePg () {
      this.getList()
    },
    onSearch (pageNo) {
      this.getList(pageNo)
    },
    getList () {
      dailySeoutStockllDetail({
        seorderfbillno: this.$route.params.seorderfbillno,
      }).then(res => {
        if (res.success) {
          this.taskList = res.result
          this.total = res.result.total
        }else {
          Notify({ type: 'danger', message: res.message, duration: 4000 })
        }

      })
    },
    back () {
      this.$router.push({name: 'dnDailyShipmentList'})
    },
  }
}
</script>

<style scoped>
.customer{
  min-height: 100vh;
  background: #ffffff;
}
.listColumn{
  width: 1650px;
  display: flex;
  line-height: 45px;
  background: #eee;
}
.listColumn div:nth-of-type(1) {
  width: 150px;
}
.listColumn div:nth-of-type(2) {
  width: 300px;
}
.listColumn div:nth-of-type(3) {
  width: 300px;
}
.listColumn div:nth-of-type(4) {
  width: 300px;
}
.listColumn div:nth-of-type(5) {
  width: 150px;
}
.listColumn div:nth-of-type(6) {
  width: 150px;
}
.listColumn div:nth-of-type(7) {
  width: 150px;
}
.listColumn div:nth-of-type(8) {
  width: 150px;
}
.listItem{
  width: 1650px;
  display: flex;
  line-height: 38px;
  border-bottom: 1px solid #eeeeee;
}
.listItem div:nth-of-type(1) {
  width: 150px;
}
.listItem div:nth-of-type(2) {
  width: 300px;
}
.listItem div:nth-of-type(3) {
  width: 300px;
}
.listItem div:nth-of-type(4) {
  width: 300px;
}
.listItem div:nth-of-type(5) {
  width: 150px;
}
.listItem div:nth-of-type(6) {
  width: 150px;
}
.listItem div:nth-of-type(7) {
  width: 150px;
}
.listItem div:nth-of-type(8) {
  width: 150px;
}
</style>